//准备好chart里面基本的series
var hotwindSeries=[
    {name:'gas_prediction',type:'line',lineStyle:'dotted',color:'#00ccfe'},
    {name:'gas_history',type:'line',lineStyle:'solid', color:'#00ccfe'},
    {name:'gongding_prediction',type:'line',lineStyle:'dotted', color:'#bd9653'},
    {name:'gongding_history',type:'line',lineStyle:'solid', color:'#bd9653'},
    {name:'feiqi_prediction',type:'line',lineStyle:'dotted', color:'#b0e9fd'},
    {name:'feiqi_history',type:'line',lineStyle:'solid', color:'#b0e9fd'},
    {name:'lengfengyacha_prediction',type:'line',lineStyle:'dotted', color:'#adeaff'},
    {name:'lengfengyacha_history',type:'line',lineStyle:'solid', color:'#adeaff'},
    {name:'hunfengbi_prediction',type:'line',lineStyle:'dotted', color:'#be9553'},
    {name:'hunfengbi_history',type:'line',lineStyle:'solid', color:'#be9553'},
    {name:'songfengya_prediction',type:'line',lineStyle:'dotted',color:'#b0e9fd'},
    {name:'songfengya_history',type:'line',lineStyle:'solid',color:'#b0e9fd'},
    {name:'songfengwen_prediction',type:'line',lineStyle:'dotted',color:'#00ccfe'},
    {name:'songfengwen_history',type:'line',lineStyle:'solid',color:'#00ccfe'}
];
var nameJson = {
    'gas_history':'实际用气',
    'gas_prediction':'预计用气',
    'feiqi_history':'废气温度',
    'feiqi_prediction':'废气温度预测',
    'songfengya_history':'实际送风压',
    'songfengya_prediction':'额定送风压',
    'songfengwen_history':'送风温度',
    'songfengwen_prediction':'送风温度预测',
    'hunfengbi_history':'混风比',
    'hunfengbi_prediction':'混风比预测',
    'lengfengyacha_history':'冷风压差实际值',
    'lengfengyacha_prediction':'冷风压差预测值'
}

var hotwindOption={
    tooltip:{
        show:true,
        formatter:function(params){
            var nameArr = [];
            var valueArr = [];
            var str = '';
            for(var i=0;i<params.length;i++){
                nameArr[i]=nameJson[params[i].seriesName];
                valueArr[i]=Number(params[i].data).toFixed(1);

                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
            }
            return str
        }
    },
    grid:{
        containLabel:true,
        left:10,
        top:30,
        right:10,
        bottom:10
    },
    yAxis:{
        axisLabel:{
            formatter:function (value, index) {
                return Number(value).toFixed(1);
            }
        },
        name:''
    }
}

var platformSeries=[
    {name:'当前总用气',type:'line',lineStyle:'solid',color:'#00ccfe'},
    {name:'预计总用气',type:'line',lineStyle:'dotted', color:'#00ccfe'},
    {name:'1号高炉用气',type:'line',lineStyle:'solid',color:'#88c512'},
    {name:'2号高炉用气',type:'line',lineStyle:'solid',color:'#6a20e7'},
    {name:'3号高炉用气',type:'line',lineStyle:'solid',color:'#8b05c6'},
    {name:'4号高炉用气',type:'line',lineStyle:'solid',color:'#b56911'},
    {name:'5号高炉用气',type:'line',lineStyle:'solid',color:'#1a8cff'}
];

var platformOption={
    tooltip:{
        show:true,
        formatter:function(params){
            var nameArr = [];
            var valueArr = [];
            var str = '';
            for(var i=0;i<params.length;i++){
                nameArr[i]=params[i].seriesName;
                valueArr[i]=Number(params[i].data).toFixed(1);

                str+= nameArr[i]+' : '+valueArr[i]+'<br/>'
            }
            return str
        }
    },
    yAxis:{
        name:'X10³',
        axisLabel:{
            formatter:function (value, index) {
                return Number(value)/Math.pow(10,3).toFixed(1);
            }
        }
    }
};


var bus=new Vue();
//头部信息
var header=new Vue({
    el:'#header',
    data:{
        headerMenuList:[
            ['3号高炉','3'],
            ['4号高炉','4'],
            ['5号高炉','5']
        ]
    }
})
//本班绩效组件
Vue.component('performance',{
    props:['performanceMsg'],
    filters:{
        keepTwo:function(val){
            return val/Math.pow(10,5).toFixed(1);
        },
        formatterMinutes:function(val){
            return Math.floor(val/1000/60);
        }
    },
    computed:{
        
    },
    watch:{
        performanceMsg:function(val){
            this.message=this.performanceMsg;
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            var data1 =this.message.waiquan;
            var data2 = this.message.neiquan;
            chartMl('achieve_chart',data1,data2);
            setInterval(function(){
                chartMl('achieve_chart',data1,data2);
            },3000)
        })
    },
    data:function(){
        return {
            message:this.performanceMsg
        }
    },
    template:`<div class="gas-content skin2 border">
                <div class="achieve clearfix">
                    <div class="fl achieve-poe border">主操:<span>{{message.operator}}</span></div>
                    <p class="fr achieve-lenged"><span class="square green"></span>减小波动</p>
                    <p class="fr achieve-lenged outter-right"><span class="square red"></span>增加波动</p>
                </div>
                <div class="clearfix">
                    <ul class="fl outter-top mar6">
                        <li class="achieve-content">
                            <span class="achieve-arrow"></span><em class="achieve-num red-color">{{message.tiqian}}</em>次<b class="achieve-text mar18">提前换炉</b>
                        </li>
                        <li class="achieve-content">
                            <span class="achieve-arrow"></span><em class="achieve-num red-color">{{message.yanchi}}</em>次<b class="achieve-text mar18">延迟换炉</b>
                        </li>
                        <li class="achieve-content">
                            <span class="achieve-arrow"></span><em class="achieve-num red-color">{{message.zengjiabodong | formatterMinutes}}</em>min<b class="achieve-text mar18">延迟时长</b>
                        </li>
                    </ul>
                    <div class="achieve-chart fl" id="achieve_chart"></div>
                    <ul class="fr outter-top">
                        <li class="achieve-content">
                            <b class="achieve-text mar6" >准点换炉</b>
                            <em class="achieve-num red-color " style="color:green;">{{message.zhundian}}</em> 次<span class="achieve-arrow mar18"></span>
                        </li>
                        <li class="achieve-content">
                            <b class="achieve-text mar6" >协调回稳</b>
                            <em class="achieve-num red-color "  style="color:green;">{{message.xietong}}</em> 次<span class="achieve-arrow mar18"></span>
                        </li>
                        <li class="achieve-content">
                            <b class="achieve-text mar6 " >协同时长</b>
                            <em class="achieve-num red-color "  style="color:green;">{{message.jianxiaobodong | formatterMinutes}}</em>min<span class="achieve-arrow mar18"></span>
                        </li>
                    </ul>
                </div>
            </div>`
});

//左侧
var  performance_vm=new Vue({
    el:'#left-side',
    data:{
        performanceData:{},
        gaolu:4,
        productData:{}
    },
    mounted:function(){
        this.$nextTick(function(){
            var _this=this;
            this.getData();
            this.getGaoluNum();
            this.updateGaolu();
            setInterval(function(){
                _this.getData();
            },3000)
        });
    },
    methods:{
        updateGaolu:function(){
            var item=getStore('gaolu');
            if(item){
                this.gaolu=item[1];
            }
        },
        getData:function(){//本班绩效
            var _this=this;
            var success=function(res){
                var data=res.data;
                _this.performanceData=data;
            };
            var error=function(res){
                console.log('本班绩效加载出错');
            };
            this.$http.get(URL+'/gaolu/'+this.gaolu+'/refenglu/Evaluation',{}).then(success,error);
            //this.$http.get('http://192.168.100.179:8082/gaolu/3/refenglu/Evaluation',{}).then(success,error);
        },
        getGaoluNum:function(){
            var _this=this;
            bus.$on('gaoluNum',function(num){
                _this.gaolu=num;
            });
        }
    }
});

//热风炉主内容区
var hotwind_vm=new Vue({
    el:'#hotwind_main',
    data:{
        hotwindData:{},//每个热风炉的详细信息
        hotwindChart:[],//实例化的热风炉图表
        myself:[],//消息中心
        status:1,
        num:0,
        chartId:['chart_'+uuid(6,64),'chart_'+uuid(6,64),'chart_'+uuid(6,64)],
        hotwindSeries:hotwindSeries,
        historyData:{},//存放图表上的历史数据
        gaolu:4,
        loadTimes:0,
        msgType:'all' ,
        timeStamp:0,
        temperaturedata:{
            1:{gd_temp: '',
               refenglu_id: '',
               fq_temp: '',
               fq_temp_speed_actual: '',
               lf_pressure: '',
               lf_pressure_speed_actual: '',
               lf_pressure_speed_suggest: '',
               songfengwen: '',
               songfengya: '',
               lf_pressure: '',
               lf_pressure_speed_actual: '',
               lf_pressure_speed_suggest: ''
              },
            2:{gd_temp: '',
            refenglu_id: '',
            fq_temp: '',
            fq_temp_speed_actual: '',
            lf_pressure: '',
            lf_pressure_speed_actual: '',
            lf_pressure_speed_suggest: '',
            songfengwen: '',
            songfengya: '',
            lf_pressure: '',
            lf_pressure_speed_actual: '',
            lf_pressure_speed_suggest: ''
           },
            3:{gd_temp: '',
            refenglu_id: '',
            fq_temp: '',
            fq_temp_speed_actual: '',
            lf_pressure: '',
            lf_pressure_speed_actual: '',
            lf_pressure_speed_suggest: '',
            songfengwen: '',
            songfengya: '',
            lf_pressure: '',
            lf_pressure_speed_actual: '',
            lf_pressure_speed_suggest: ''
           }
        }

    },
    filters:{
        keepTwo:function(val){
            return (val/Math.pow(10,4)).toFixed(2);
        },
        keepOne:function(val){
            return Number(val).toFixed(1);
        },
        formatterVal:function(val){
            return val.toFixed(2);
        },
        formatterTime:function(val){
            var val=Math.abs(val);
            //转换分钟
            var min=toDou(Math.floor(val/1000/60));
            //转化秒
            var seconds=toDou(Math.floor(val/1000%60))

            return min+":"+seconds;
        },
        hotwindStatus:function(val){
            switch(val){
                case 1:
                    return '冲压';
                    break;
                case 2:
                    return '送风';
                    break;
                case 3:
                    return '燃烧';
                    break;
                default:
            }
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            this.getTimeStamp();
            this.getGaoluNum();
            this.updateGaolu();
            this.temperature();
            this.showHotWind().then(res=>{
                this.hotwindData=res;
                this.changeClass();
                this.changeColor();
                this.changeBg();
                setTimeout(()=>{
                    this.loadChart().then(res=>{
                    this.showStatus();
                    this.showHistory();
                    this.loopUpdate();  
                }).catch(err=>{
                    console.log(err);
                })
                },3000);
                
            }).catch(err=>{
                console.log(err)
            })    
            setInterval(()=>{
                this.getTimeStamp();
            },1000*60)
        });
    },
    methods:{
        //3秒更新一次数据
        loopUpdate:function(){
          setInterval(()=>{
                this.getMessage();
                this.temperature();
                this.showHotWind().then(res=>{
                    this.hotwindData=res;
                    this.showStatus();
                    this.changeClass();
                    this.changeColor();
                    this.changeBg();
                }).catch(err=>{
                    console.log(err);
                })
            },3000);  
        },
        //更新高炉编号（刷新页面获取高炉编号）
        updateGaolu:function(){
            var item=getStore('gaolu');
            if(item){
              this.gaolu=item[1];  
            }
            
        },
        //从外部获取高炉编号
        getGaoluNum:function(){
            var _this=this;
            bus.$on('gaoluNum',function(num){
                _this.gaolu=num;
                _this.showHistory();
            });
        },
        //获取信息中心的数据
        getMessage:function(){
            var _this=this;
            bus.$on('msgType',function(val){
                _this.msgType=val;
            });
            
            var success=function(res){
                _this.myself=res.data;
            };
            var error=function(e){
                console.log('热风炉信息中心出错了');
            };
            switch(this.msgType){
                case 'mine':
                   //this.$http.get(URL+'/message/gaolu/'+this.gaolu+'/refenglu/current').then(success,error);
                break;
                case 'all':
                   this.$http.get(URL+'/message/current'+"?ran=" + Math.random()).then(success,error);
                break;
            }
        },
        //获取时间戳
        getTimeStamp:function(){
            var _this=this;
            var success=function(res){
                _this.timeStamp=res.data.time;
                //console.log(res.data);
            };
            var error=function(e){
                console.log('加载时间戳出错了');
            };

           this.$http.get(URL+'/time/getTime').then(success,error);
            //this.$http.get('http://192.168.100.179:8082/time/getTime').then(success,error);
        },
        progressStyle:function(item,w){
            //进度条样式
            return {
                width:item.cur_process_finished/100*w+'px',
                background:item.color
            }
        },
        //清空echart里面的数据
        emptyChart:function(index,name){
            //index控制是第几个chart，name是chart里面控制的线条数据不被清空
            for(var i=0;i<this.hotwindSeries.length;i++){
                if(this.hotwindChart.length==0)return false;
                if(name){
                    if(this.hotwindSeries[i].name==name[0] || this.hotwindSeries[i].name==name[1] ||this.hotwindSeries[i].name==name[2])continue;
                }
                this.hotwindChart[index].loadData(this.hotwindSeries[i].name,[]);
            }
        },
        //加载历史数据
        showHistory:function(){
            var rNum=0;
            var gaolu=this.gaolu;
            for(var name in this.hotwindData){
                rNum++;
                this.emptyChart(rNum-1);
                var item=this.hotwindData[name];
                switch(item.method){
                    case 1://煤气用量历史
                        this.getChartData({
                            name:'gas_history',
                            statusName:'gas',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            print:rNum+'煤气历史点是'
                        });
                        break;
                    case 2://废气历史
                        // this.getChartData({
                        //     name:'gongding_history',
                        //     statusName:'gongding',
                        //     num:gaolu,
                        //     rNum:rNum,
                        //     type:'history',
                        //     //print:'拱顶历史点是'
                        // });
                        //this.emptyChart(rNum,'feiqi_history');
                        this.getChartData({
                            name:'feiqi_history',
                            statusName:'feiqi',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            //print:'废气历史点是'
                        });
                        break;
                    case 3://混风比历史
                        this.getChartData({
                            name:'hunfengbi_history',
                            statusName:'hunfengbi',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            //print:'混风比历史点是'
                        });
                    case 4://送风压历史
                        this.getChartData({
                            name:'songfengya_history',
                            statusName:'songfengya',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            //print:'送风压历史点是'
                        });
                        break;
                    case 5://送风温历史
                        this.getChartData({
                            name:'songfengwen_history',
                            statusName:'songfengwen',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            //print:'送风温历史点是'
                        });
                        break;
                    case 6://冷风压差历史
                        this.getChartData({
                            name:'lengfengyacha_history',
                            statusName:'lengfengyacha',
                            num:gaolu,
                            rNum:rNum,
                            type:'history',
                            //print:'lengfengyacha历史点是'
                        });
                        break;
                };  
            }   
        },
        //3秒加载一次数据
        showHotWind:function(){
            return new Promise((resolve,reject)=>{
                this.$http.get(URL+'/gaolu/'+this.gaolu+'/refenglu'+"?ran=" + Math.random(),
                {}).then(res=>{
                   var data=res.data;
                   resolve(data)
                },()=>{
                   reject('高炉加载出错了')
                });
            })
        },
        //根据状态判断加载不同的数据
        showStatus:function(){
            var index=0;//初始化一个index，用来控制热风炉编号
            var gaolu=this.gaolu;//获取高炉编号
            for(var name in this.hotwindData){
                var item=this.hotwindData[name];
                //刷新页面仍能还原当前页面
                // methodNum：{
                //    1：煤气用量，
                //    2:废气温度
                //    3：混风比
                //    4：送风压
                //    5：送风温 
                //    6：冷风压差
                // }
                var methodNum=getStore('method'+name);
                index++;//循环热风炉1,2，3
                //根据scada_status判断是燃烧，送风，冲压
                switch(item.scada_status){
                    case 1://燃烧
                        this.$set(item,'name','燃烧');
                        if(methodNum==1){
                            this.emptyChart(index-1,['gas_real','gas_prediction','gas_history']);
                            this.getChartData({
                                name:'gas_prediction',
                                statusName:'gas',
                                num:gaolu,
                                rNum:index,
                                type:'prediction'
                            });
                            this.getChartData({
                                name:'gas_real',
                                statusName:'gas',
                                num:gaolu,
                                rNum:index,
                                type:'realPoint',
                                //print:'煤气实时点是'
                            });
                            
                        }else if(methodNum==2){
                            this.emptyChart(index-1,['feiqi_real','feiqi_prediction','feiqi_history']);
                            this.getChartData({
                                name:'feiqi_prediction',
                                statusName:'feiqi',
                                num:gaolu,
                                rNum:index,
                                type:'prediction'
                            });
                            this.getChartData({
                                name:'feiqi_real',
                                statusName:'feiqi',
                                num:gaolu,
                                rNum:index,
                                type:'realPoint',
                                //print:'feiqi_real----'
                                
                            });
                            
                        }else{
                            setStore('method'+name,1);
                        } 
                        break;
                    case 2://冲压
                        this.$set(item,'name','冲压');
                        this.emptyChart(index-1,['lengfengyacha_real','lengfengyacha_prediction','lengfengyacha_history']);
                        this.getChartData({
                            name:'lengfengyacha_prediction',
                            statusName:'lengfengyacha',
                            num:gaolu,
                            rNum:index,
                            type:'prediction',
                            //print:'冷风压差的预测数据是'
                        });
                        this.getChartData({
                            name:'lengfengyacha_real',
                            statusName:'lengfengyacha',
                            num:gaolu,
                            rNum:index,
                            type:'realPoint',
                            //print:'lengfengyacha的实时点是'
                        });
                        
                        break;
                    case 3://送风
                        this.$set(item,'name','送风');
                        if(methodNum==3){
                            this.emptyChart(index-1,['hunfengbi_real','hunfengbi_prediction','hunfengbi_history']);
                            this.getChartData({
                                name:'hunfengbi_prediction',
                                statusName:'hunfengbi',
                                num:gaolu,
                                rNum:index,
                                type:'prediction',
                                //print:'混风比预测数据是'
                            });
                            this.getChartData({
                                name:'hunfengbi_real',
                                statusName:'hunfengbi',
                                num:gaolu,
                                rNum:index,
                                type:'realPoint',
                                //print:'hunfengbi_real---'
                            });
                            
                        }else if(methodNum==4){
                            this.emptyChart(index-1,['songfengya_real','songfengya_prediction','songfengya_history']);
                            this.getChartData({
                                name:'songfengya_prediction',
                                statusName:'songfengya',
                                num:gaolu,
                                rNum:index,
                                type:'prediction',
                                //print:'songfengya预测数据是'
                            });
                            this.getChartData({
                                name:'songfengya_real',
                                statusName:'songfengya',
                                num:gaolu,
                                rNum:index,
                                type:'realPoint',
                                //print:'songfengya_real---'
                            });
                            
                        }else if(methodNum==5){
                            this.emptyChart(index-1,['songfengwen_real','songfengwen_prediction','songfengwen_history']);
                            this.getChartData({
                                name:'songfengwen_prediction',
                                statusName:'songfengwen',
                                num:gaolu,
                                rNum:index,
                                type:'prediction',
                                //print:'送风温预测数据是'
                            });
                            this.getChartData({
                                name:'songfengwen_real',
                                statusName:'songfengwen',
                                num:gaolu,
                                rNum:index,
                                type:'realPoint',
                                //print:'songfengwen_real---'
                            });
                             
                        }else{
                            setStore('method'+name,3);
                        }
                        break;
                }
            }              
        },
        //获取chart图表数据
        getChartData:function(config){
            console.log(config)
            //线在echart中的name值
            var series_name=config.name || '';
            //后台传过来的数据名称
            var status_name=config.statusName|| '';
            //高炉编号
            var gaolu_num=config.num || '';
            //热风炉编号
            var refenglu_num=config.rNum || '';
            //后台传过来的数据类型
            var type=config.type || '';
            //打印一个结果
            var print=config.print || '';
            var _this=this;
            var index=0;
            var success=function(res){
                var data=res.data;
                var axis=getAxis(data);
                //预测的数据处理 送风温和混风比没有预测数据所以只加载x轴
                if(series_name==='gas_prediction' || series_name==='lengfengyacha_prediction' || series_name==='songfengya_prediction'){
                    _this.hotwindChart[refenglu_num-1].loadX(axis.dataX);
                    _this.hotwindChart[refenglu_num-1].loadData(series_name,axis.dataY);
                }else if(series_name==='songfengwen_prediction'|| series_name==='hunfengbi_prediction'){
                    _this.hotwindChart[refenglu_num-1].loadX(axis.dataX);
                }
                //如果type是history,把数据存放到historyData里面，以后实时的点也往里面加
                if(type == 'history'){
                    _this.historyData[series_name+refenglu_num]=data;
                    //this.historyData[series_name+refenglu_num+'test']=[];
                    _this.hotwindChart[refenglu_num-1].loadData(series_name,axis.dataY);
                }
                //把实时的点放到数组里面
                if(type == 'realPoint'){
                    var hisName=series_name.replace(/real/,'history');
                    if(_this.historyData[hisName+refenglu_num]){
                        //this.historyData[hisName+refenglu_num+'test'].push(data);
                        _this.historyData[hisName+refenglu_num].push(data);
                        if((typeof _this.historyData[hisName+refenglu_num][0]) == 'undefined') return;
                        var axisReal=getAxis(_this.historyData[hisName+refenglu_num]);
                        _this.hotwindChart[refenglu_num-1].showTip(hisName,axisReal.dataY);
                        _this.hotwindChart[refenglu_num-1].loadData(hisName,axisReal.dataY);
                    }else{
                       _this.historyData[hisName+refenglu_num]=[];
                       _this.historyData[hisName+refenglu_num].push(data); 
                    }
                }
                // if(print){
                //     console.log(print+','+data.slice(-1));
                // }
                
            };
            var error=function(e){
                console.log(e);
            };
            //接口
            this.$http.get(URL+'/gaolu/'+gaolu_num+'/refenglu/'+refenglu_num+'/'+status_name+'/'+type+'/'+"?ran=" + Math.random(),{}).then(success,error);
        },
        //初始化加载chart
        loadChart:function(){
            var _this=this;
            return new Promise((resolve,reject)=>{
               try{
                    this.chartId.forEach(function(item,index){
                        _this.hotwindChart[index]=new Chart(item,{
                            data:_this.hotwindSeries,
                            baseOption:hotwindOption
                        });
                    });
                    resolve(); 
                }
                catch(err){
                    reject(new Error(err))
                }
            })
            
        },
        changeClass:function(){
            /*
                通过状态，1，设置method的状态 2，同时存储method的状态
            */
            for(var name in this.hotwindData){
                var item=this.hotwindData[name];
                var methodNum=getStore('method'+name);
                if(item.scada_status==1){ 
                    if(methodNum){
                        this.$set(item,'method',methodNum);
                    }else{
                        this.$set(item,'method',1);
                    }
                }else if(item.scada_status==2){
                    if(methodNum){
                        this.$set(item,'method',methodNum);
                    }else{
                        this.$set(item,'method',6);
                    }
                }else if(item.scada_status==3){
                    this.$set(item,'method',3);
                    if(methodNum){
                        this.$set(item,'method',methodNum);
                    }else{
                        this.$set(item,'method',3);
                    }
                }
                setStore('method'+name,item.method);
            }
        },
        changeColor:function(){
            /*
                通过状态值改变进度条的颜色
            */
            for(var name in this.hotwindData){
                var item=this.hotwindData[name];
                if(item.status==2 ||item.status==3){
                    this.$set(item,'color','#d31d10');
                }else if(item.status==1 ||item.status==5){
                    this.$set(item,'color','#078d1c');
                }else if(item.status==6 || item.status==4){
                    this.$set(item,'color','#c28029');
                }
            }
        },
        changeBg:function(){
            for(var name in this.hotwindData){
                var item=this.hotwindData[name];
                if(item.notification==1){
                    this.$set(item,'className','hotwind-warning');
                }else{
                    this.$set(item,'className','');
                }      
            }       
        },
        changeImg:function(item){
            if(item.scada_status==1){//燃烧
                return 'main-item-normal';
            }else if(item.scada_status==2){//冲风
                return 'main-item-stamp';
            }else if(item.scada_status==3){//送压
                return 'main-item-air';
            }
        },
        changeData:function(item,val,index){
            /*
                item:后台传的数据,
                val: 
                index:确定当前点的是哪个热风炉
                通过method值判断加载哪个数据
            */
            item.method=val;
            var rNum=index;
            var gaolu=this.gaolu;
            this.emptyChart(index-1);
            setStore('method'+index,val);
            switch(item.method){
                case 1:
                    this.getChartData({
                        name:'gas_history',
                        statusName:'gas',
                        num:gaolu,
                        rNum:rNum,
                        type:'history',
                        print:'点击以后煤气历史点是'
                    });
                    this.getChartData({
                        name:'gas_prediction',
                        statusName:'gas',
                        num:gaolu,
                        rNum:rNum,
                        type:'prediction',
                       // print:'煤气预测数据是'
                    }); 
                    break;
                case 2:
                    this.getChartData({
                        name:'feiqi_history',
                        statusName:'feiqi',
                        num:gaolu,
                        rNum:rNum,
                        type:'history',   
                    });
                    this.getChartData({
                        name:'feiqi_prediction',
                        statusName:'feiqi',
                        num:gaolu,
                        rNum:rNum,
                        type:'prediction',
                        //print:'拱顶预测数据是'
                    });
                    break;
                case 3:
                    // this.emptyChart(index-1,'hunfengbi_history');
                    // this.emptyChart(index-1,'hunfengbi_prediction');
                    this.getChartData({
                        name:'hunfengbi_history',
                        statusName:'hunfengbi',
                        num:gaolu,
                        rNum:rNum,
                        type:'history',
                        //print:'混风比历史点是'
                    });
                    this.getChartData({
                        name:'hunfengbi_prediction',
                        statusName:'hunfengbi',
                        num:gaolu,
                        rNum:rNum,
                        type:'prediction',
                        //print:'混风比预测数据是'
                    });
                    break;
                case 4:
                    // this.emptyChart(index-1,'songfengya_history');
                    // this.emptyChart(index-1,'songfengya_prediction');
                    this.getChartData({
                        name:'songfengya_history',
                        statusName:'songfengya',
                        num:gaolu,
                        rNum:rNum,
                        type:'history',
                        //print:'送风压历史点是'
                    });
                    this.getChartData({
                        name:'songfengya_prediction',
                        statusName:'songfengya',
                        num:gaolu,
                        rNum:rNum,
                        type:'prediction',
                        //print:'songfengya预测数据是'
                    });
                    break;
                case 5:
                    // this.emptyChart(index-1,'songfengwen_history');
                    // this.emptyChart(index-1,'songfengwen_prediction');
                    this.getChartData({
                        name:'songfengwen_history',
                        statusName:'songfengwen',
                        num:gaolu,
                        rNum:rNum,
                        type:'history',
                        //print:'送风温历史点是'
                    });
                    this.getChartData({
                        name:'songfengwen_prediction',
                        statusName:'songfengwen',
                        num:gaolu,
                        rNum:rNum,
                        type:'prediction'
                       // print:'songfengwen预测数据是'
                    });
                    break;
            }
        },
        temperature:function(){
            var _this = this;
            var success = function(res){
                _this.temperaturedata = res.data;
            };
            var error = function(e){
                console.log(e)
            };
            this.$http(URL+'/gaolu/'+this.gaolu+'/refenglu/status'+"?ran=" + Math.random()).then(success,error);
        }
    }
});

var  rightside_vm = new Vue({
    el:"#right-side",
    data:{
        dataList:[],
        gas_total:[],
        gaolu:4,
        platformChart:null,
        platformHistory:{},
        checkedNames: [false,false,false],
        selected1:'',
        selected2:'',
        selected3:'',
        selected4:'',
        selected5:'',
        selected6:'',
        choseBos:true,
        allrealPoint:[]
    },
    filters:{
        keepTwo:function(val){
            return (val).toFixed(2);
        },
        formatterTime:function(val){
            var val=Math.abs(val);
            //转换分钟
            var min=toDou(Math.floor(val/1000/60));
            //转化秒
            var seconds=toDou(Math.floor(val/1000%60))

            return min+":"+seconds;
        },
        formatterVal:function(val){
            return (val/Math.pow(10,5)); 
        },
        refengluStatus:function(val){
            switch(val){
                case 1:
                    return '即将冲压';
                    break;
                case 2:
                    return '即将送风';
                    break;
                case 3:
                    return '即将燃烧';
                    break;
                default:
                    return '状态未知';
                    break;
            }
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            var _this=this;
            //this.getJson();
            this.getGaoluNum();
            this.updateGaolu();
            this.Receive();
            setTimeout(function(){
                _this.initPlatFormChart();
                _this.getPlatFormHistory();
            },2000);

            setInterval(function(){
                _this.getPlatFormChartData({
                    name:'预计总用气',
                    type:'prediction',
                    url:URL+'/quanwang/refenglu/prediction'+"?ran=" + Math.random()
                });
                _this.getPlatFormReal();
                _this.getJson();
                
            },3000)
        })
    },
    methods:{
        updateGaolu:function(){
            var item=getStore('gaolu');
            if(item){
              this.gaolu=item[1];  
            }
            
        },
        getGaoluNum:function(){
            //从外部获取高炉编号
            var _this=this;
            bus.$on('gaoluNum',function(num){
                _this.gaolu=num;
            });
        },
        getJson:function(){
            var _this=this;
            _this.$http(URL+'/gaolu/refenglu/xietong/list').then(function(res){
                    _this.dataList= res.data;
                   // console.log(_this.dataList)
                })
            _this.$http(URL+'/gaolu/refenglu/gasuse/realPoint'+"?ran=" + Math.random()).then(function(res){
                    _this.gas_total= res.data;
                    //console.log(_this.gas_total);
                })
            /*setInterval(function(){
                _this.$http(URL+'/gaolu/refenglu/xietong/list').then(function(res){
                    _this.dataList= res.data;
                });
                _this.$http(URL+'/gaolu/refenglu/gasuse/realPoint').then(function(res){
                    _this.gas_total= res.data;
                    //console.log(_this.gas_total);
                })
            },3000)*/
            
        },
        showHide:function(index){
            //console.log(index);
            this.dataList[index].flag=!this.dataList[index].flag
        },
        changeMsg:function(item){
            if(!item)return;
            switch(item.status){
                case 1:
                    return '剩余时间';
                case 2:
                    return '已延迟时间';
                case 3:
                    return '严重延迟';
                case 4:
                    return '协同';
                case 5:
                    return '切换';
                case 6:
                    return '请换炉';
            }
        },
        progressStyle:function(item,w){
            return {
                width:item.cur_process_finished/100*w+'px',
                background:item.color
            }
        },
        initPlatFormChart:function(){
            this.platformChart=new Chart('hotwind_platform_chart',{
                data:platformSeries,
                baseOption:platformOption
            })
        },
        getPlatFormChartData:function(config){
            var _this=this;
            var success=function(res){
                var data=res.data;
                var Axis=getAxis(data);
                if(config.type=='prediction'){//预测
                    _this.platformChart.loadX(Axis.dataX);
                    _this.platformChart.loadData('预计总用气',Axis.dataY);
                    if(config.name=='预计总用气'){
                        _this.allrealPoint =Axis.dataY;
                    }
                /*}else if(config.type=='baseline'){//基线
                    _this.platformChart.loadBaseLine(config.name,{
                        data:eval('('+data+')')
                    });*/
                }else if(config.type=="history"){//历史
                    _this.platformHistory[config.name+'_'+config.type]=Axis.dataY;
                    _this.platformChart.loadData(config.name,Axis.dataY);
                } else{//实时
                    if(_this.platformHistory[config.name+'_'+config.type]){
                        _this.platformHistory[config.name+'_'+config.type].shift();
                        _this.platformHistory[config.name+'_'+config.type].push(Axis.dataY[0]);
                        _this.platformChart.loadData(config.name,_this.platformHistory[config.name+'_'+config.type]);
                    }
                }    
            };
            var error=function(e){
                console.log('热风炉协同台加载出错了');
            };
            this.$http.get(config.url).then(success,error);
        },
        getPlatFormHistory:function(){
                this.getPlatFormChartData({
                    name:'当前总用气',
                    type:'history',
                    url:URL+'/quanwang/refenglu/history'
                });
                this.getPlatFormChartData({
                    name:'1号高炉用气',
                    type:'history',
                    url:URL+'/gaolu/1/refenglu/gas/history'
                });
                this.getPlatFormChartData({
                    name:'2号高炉用气',
                    type:'history',
                    url:URL+'/gaolu/2/refenglu/gas/history'
                });
                this.getPlatFormChartData({
                    name:'3号高炉用气',
                    type:'history',
                    url:URL+'/gaolu/3/refenglu/gas/history'
                });
                this.getPlatFormChartData({
                    name:'4号高炉用气',
                    type:'history',
                    url:URL+'/gaolu/4/refenglu/gas/history'
                });
                this.getPlatFormChartData({
                    name:'5号高炉用气',
                    type:'history',
                    url:URL+'/gaolu/5/refenglu/gas/history'
                });
        },
        getPlatFormReal:function(){
                this.getPlatFormChartData({
                    name:'当前总用气',
                    type:'real',
                    url:URL+'/quanwang/refenglu/realPoint'
                });
                this.getPlatFormChartData({
                    name:'1号高炉用气',
                    type:'real',
                    url:URL+'/gaolu/1/refenglu/gas/realPoint'
                });
                this.getPlatFormChartData({
                    name:'2号高炉用气',
                    type:'real',
                    url:URL+'/gaolu/2/refenglu/gas/realPoint'
                });
                this.getPlatFormChartData({
                    name:'3号高炉用气',
                    type:'real',
                    url:URL+'/gaolu/3/refenglu/gas/realPoint'
                });
                this.getPlatFormChartData({
                    name:'4号高炉用气',
                    type:'real',
                    url:URL+'/gaolu/4/refenglu/gas/realPoint'
                });
                this.getPlatFormChartData({
                    name:'5号高炉用气',
                    type:'real',
                    url:URL+'/gaolu/5/refenglu/gas/realPoint'
                });
        },
        send:function(){
           // console.log(this.checkedNames);
            var arr =[];
            if(this.checkedNames[0]&&this.checkedNames[0]==true){
                arr[0]="3";
            }else{
                arr[0]='';
            };
            if(this.checkedNames[1]&&this.checkedNames[1]==true){
                arr[1]="4";
            }else{
                arr[1]='';
            };
            if(this.checkedNames[2]&&this.checkedNames[2]==true){
                arr[2]="5";
            }else{
                arr[2]='';
            }
            this.$http.post(URL+'/gaolu/refenglu/setHuanlu',{
                gaoluId:arr,
                time:[this.selected1,this.selected2,this.selected3],
            });
        },
        Receive:function(){
            var success= function(res){
                var _this = this;
                this.checkedNames = res.data.gaoluId;
                this.selected1=res.data.time[0];
                this.selected2=res.data.time[1];
                this.selected3=res.data.time[2];
            };
            var error = function(e){
                console.log(e)
            };
           this.$http.get(URL+'/gaolu/refenglu/huanlujiepai').then(success,error)

        },
        choseBok:function(val){
            this.choseBos = val
        }
    }
});

/*本班绩效环形图*/
/* var data1 = 60;
 var data2 = 30;
 chartMl('achieve_chart',data1,data2);*/
function chartMl(id,dataOut,dataIn){
    var ringed=document.getElementById(id);
    var myChart=echarts.init(ringed);
    placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: "center"
            },
            color: "rgba(255,255,255,0.1)",
            borderColor: "rgba(255,255,255,0.1)",
            borderWidth: 0
        },
        emphasis: {
            color: "rgba(255,255,255,0.1)",
            borderColor: "rgba(255,255,255,0.1)",
            borderWidth: 0
        }
    };
    option = {
        backgroundColor: 'rgba(0, 0, 0, 0)',
        color: ['#d31d11','rgba(0,0,0,0.2)', '#078e1c', 'rgba(0,0,0,0.2)', "#d31d11" ],
        legend: [{
            orient: '',
            icon: 'circle',
            left: 'right',
            top: 'center'
        }],
        series: [
            {
                name: '值',
                type: 'pie',
                clockWise: true, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [50, 60],//设置圆弧大小
                labelLine:{
                    normal:{
                        show:false
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                            position: 'outside'
                        },
                        /*labelLine: {
                            show: true,
                            length: 100,
                            smooth: 0.5
                        },*/
                        borderWidth: 3,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [
                    {
                        value: dataOut
                    },
                    {
                        value: 16-dataOut,
                        name: '',
                        itemStyle: placeHolderStyle
                    }
                ]
            },
            {
                name: '白',
                type: 'pie',
                clockWise: false,
                radius: [40, 40],
                hoverAnimation: false,
                data: [{
                    value: 1
                }]
            },
            {
                name: '值',
                type: 'pie',
                clockWise: false,
                hoverAnimation: false,
                radius: [20, 30],
                labelLine:{
                    normal:{
                        show:false
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        borderWidth: 2,
                        shadowBlur: 2,
                        shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
                    }
                },
                data: [{
                    value: dataIn,
                    name: ''
                }, {
                    value: 16-dataIn,
                    name: '',
                    itemStyle: placeHolderStyle
                }]
            }
        ]
    };
    myChart.setOption(option);
}


